<template>
      <div class="defaultTab">
        <bfe-table
          :data="listData"
          v-if="columns && columns.length"
          v-loading="loading"
          border
          style="width: 100%"
          :max-height="tabHeight"
          highlight-current-row
          :row-class-name="tableRowClassName"
          @row-click="handleRowClick"
        >
          <template v-for="(column, i) in columns">
            <slot :name="`col_${column.prop}_before`" :col="column"></slot>
            <bfe-table-column
              :prop="column.prop"
              :label="$t(column.label)"
              :key="i"
              :min-width="column.width ? column.width : 120"
              show-overflow-tooltip
            ></bfe-table-column>
            <slot :name="`col_${column.prop}_after`" :col="column"></slot>
          </template>
        </bfe-table>
        <bfe-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageInfo.pageNo"
          :page-sizes="[15, 30, 45, 60, 100]"
          :page-size="pageInfo.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageInfo.total"
        ></bfe-pagination>
      </div>
    </template>
    
    <script>
    export default {
      props: {
        columns: {
          type: Array,
          default: () => []
        },
        isSearch: {
          type: Boolean,
          default: false
        },
        searchObj: {
          type: Object,
          default: () => {}
        },
        tabHeight: {
          type: Number,
          default: document.body.clientHeight * 0.7 - 156
        },
        api: {
          type: String,
          default: ''
        },
        optCode: {
          type: String,
          default: ''
        },
        showPagination: {
          type: Boolean,
          default: true
        }
      },
      data() {
        return {
          pageInfo: {
            pageNo: 1,
            pageSize: 15,
            total: 0
          },
          listData: [],
          loading: false,
          selectedRows: []
        };
      },
      mounted() {
        this.getDataFlag = false;
        this.pageInfo = {
          pageNo: 1,
          pageSize: 15,
          total: 0
        };
        this.listData = [];
        setTimeout(() => {
          this.getDataFlag = true;
        }, 10);
        !this.isSearch && this.getPageData();
      },
      methods: {
        tableRowClassName(row, rowIndex) {
          row.index = rowIndex;
        },
        handleRowClick(row) {
          const index = this.selectedRows.findIndex(r => r.id === row.id);
          if (index === -1) {
            this.selectedRows.push(row);
          } else {
            this.selectedRows.splice(index, 1);
          }
          this.$emit('row-selected', this.selectedRows);
        },
        handleSizeChange(val) {
          this.pageInfo.pageNo = 1;
          this.pageInfo.pageSize = val;
          this.getDataFlag && this.getPageData();
        },
        handleCurrentChange(val) {
          this.pageInfo.pageNo = val;
          this.getDataFlag && this.getPageData();
        },
        getPageData() {
          if (!this.api) return;
          this.loading = true;
          const { pageNo, pageSize } = this.pageInfo;
          const params = {
            optCode: this.optCode,
            payload: {
              ...this.searchObj
            },
            pageInfo: {
              pageNo,
              pageSize
            }
          };
          this.$p2svr(this.$api[this.api], 'RequestPoAuth', params)
            .then(res => {
              const { payload, pageInfo: { total } } = res;
              this.listData = res.payload || [];
              this.pageInfo.total = total || 0;
            })
            .finally(() => {
              this.loading = false;
            });
        },
        reloadData() {
          this.pageInfo.pageNo = 1;
          this.selectedRows = [];
          this.getPageData();
        },
        clearSelection() {
          this.selectedRows = [];
          this.$emit('row-selected', []);
        }
      }
    };
    </script>
    
    <style lang="less" scoped>
    .defaultTab {
      width: 100%;
      float: left;
      overflow: hidden;
    }
    /deep/.giop-pagination {
      margin-top: 16px;
    }
    </style>
    